<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <!-- <uni-load-more status="loading" v-if="isLoading"></uni-load-more> -->
        <view>
            <view class="order-header" v-if="data.State == 17 && form != 'sorting'">
                <iconsfont customIcons="icon-daitihuo" size="24" style="padding-right: 10rpx"></iconsfont>待提货
            </view>

            <view class="person-info">
                <view>提货人：{{ data.OrderContactName }}</view>
                <view>手机号：{{ data.OrderContactTel }}</view>
            </view>

            <view class="order-main">
                <view class="order-item product-item">
                    <view class="goods-item" v-for="item in data.DetailList">
                        <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="goods-img"></image>
                        <view class="goods-info">
                            <view class="name">
                                {{ item.Name }}
                            </view>
                            <view class="spec">{{ item.DisplayAttribute ? item.DisplayAttribute : "默认规格" }}</view>
                            <view class="price"
                                >￥{{ item.Price }}
                                <text style="padding-left: 20rpx; font-size: 32rpx; font-weight: bold"
                                    >x{{ item.Amount }}</text
                                ></view
                            >
                        </view>
                    </view>
                    <view
                        class="itemPrice"
                        style="
                            border-top: #f0f0f0 solid 1px;
                            padding: 20rpx 0;
                            font-size: 24rpx;
                            display: flex;
                            justify-content: space-between;
                        ">
                        <view class="item">
                            <view>应提：{{ getTotalNum() }}件</view>
                            <view>实提：{{ getTotalNum() }}件</view>
                        </view>
                        <view class="item">
                            <view>金额：￥{{ data.ProductPrice }}</view>
                            <view
                                >佣金：￥<text class="maincolor">{{ data.Commission }}</text></view
                            >
                        </view>
                    </view>
                </view>
            </view>
            <view
                class="order-item product-item product-item-line"
                v-if="data.CustomForm && JSON.parse(data.CustomForm)[0].value">
                <view class="title-text title-text-flex">
                    <view>订单留言</view>
                </view>
                <view class="remark">
                    <view class="remark-main">
                        <view class="remark-desc">{{ JSON.parse(data.CustomForm)[0].value }}</view>
                    </view>
                </view>
            </view>
            <view class="order-main">
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>订单信息</view>
                    </view>
                    <view class="order-info" v-if="form == 'sorting'">
                        <view class="order-info-item">
                            <text class="label">分拣单号：</text>
                            <text class="value">{{ data.SortingNo }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.ReceivingTime">
                            <text class="label">送达时间：</text>
                            <text class="value">{{ data.ReceivingTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.EndTime">
                            <text class="label">核验时间：</text>
                            <text class="value">{{ data.EndTime }}</text>
                        </view>
                    </view>
                    <view class="order-info" v-else>
                        <view class="order-info-item">
                            <text class="label">付款时间：</text>
                            <text class="value">{{ data.AddTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.ReceivingTime">
                            <text class="label">送达团点时间：</text>
                            <text class="value">{{ data.ReceivingTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.EndTime">
                            <text class="label">确认收货时间：</text>
                            <text class="value">{{ data.EndTime }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <view class="order-state-menu">
                <text class="btn btn-gray" @click="call()">联系提货人</text>
                <text class="btn btn-gray btn-success" v-if="data.State == 17 && form != 'sorting'" @click="affirm"
                    >确认提货</text
                >
                <text class="btn btn-gray btn-success" v-if="form == 'sorting'" @click="orderTakeNotify(data.ID)"
                    >通知提货</text
                >
            </view>
        </view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确认提货?"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex"
import { orderTakeNotify } from "@/service/api/communtiyGroup.js"
import orderPrice from "@/pages_shop/components/order/order-price.vue"
import orderStateMenu from "@/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_shop/components/common/item-title-border.vue"
import { getOrderDetail, AddOrEditOrderRemark } from "@/service/api/order.js"
import { OrderTakeComplete } from "@/service/api/communtiyGroup.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            config: {
                title: "订单详情",
                back: true,
                color: ["#333"],
                centerSlot: true,
                barPlaceholder: true,
                backgroundColor: [1, "#ffffff"],
            },
            itemname: "", //单个商品显示名称
            remarkdesc: "",
            isShowBottomBar: false,
            id: 0,
            allPayPic: 0,
            data: {},
            detailList: [],
            isLoading: false,
            imgs: [],
            showImgs: [],
            statelist: [],
            stateCurrent: 0,
            listData: {},
            systemInfo: {},
            ordertype: 23,
            form: "",
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.getDetail()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onReady() {
        //
    },
    onLoad(e) {
        this.id = e.id
        this.allPayPic = e.allPayPic
        if (e.form) {
            this.form = e.form
        }
    },
    created() {},
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
        this.systemInfo = uni.getSystemInfoSync()
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        //获取详情
        getDetail() {
            let param = {
                orderId: this.id,
            }
            this.isLoading = true
            getOrderDetail(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data.OrderDetail
                    this.detailList = this.data.DetailList
                    // this._dataformat(this.detailList);
                    // let statelist = this.data.StateProgressData;
                    // this.statelist = statelist.reverse();
                    // this.statelist.forEach((e, index) => {
                    // 	if (this.data.StateName == e.StateName) {
                    // 		this.stateCurrent = index;
                    // 	}
                    // })
                    // this.getImageList(this.data.DetailList)
                    this.isLoading = false
                }
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.Name,
                        ProductImage: e.ProductImage,
                        Attribute: e.DisplayAttribute,
                        SubItems: SubItems,
                        QAList: e.QAList,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            this.listData = items
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.ProductImage)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].Name
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        pay() {
            uni.requestPayment({
                provider: "wxpay",
                timeStamp: String(Date.now()),
                nonceStr: "A1B2C3D4E5",
                appId: "wx5a51d968090b16b2",
                package: "prepay_id=" + "wx2021061314502291fcfe0db70013231072",
                signType: "MD5",
                paySign: "111111111",
                total_fee: 0.01,
                success: function (res) {},
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err))
                },
            })
        },
        affirm() {
            this.$refs.popTip.open()
        },
        //关闭弹窗
        cancelIt() {
            this.$refs.popTip.close()
        },
        doIt() {
            let param = {
                orderIds: this.data.ID,
            }
            OrderTakeComplete(param).then((res) => {
                if (res.State == 1) {
                    this.upOrderView()
                    this.getDetail()
                }
            })
            this.cancelIt()
        },
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.data.OrderContactTel,
            })
        },
        remarkClose() {
            this.$refs.popReturnTip.close()
            this.remarkdesc = ""
        },
        remarkConfirm() {
            if (this.remarkdesc == "") {
                this.easyToast("请填写备注")
                return
            }
            let param = {
                orderId: this.id,
                content: this.remarkdesc,
            }
            AddOrEditOrderRemark(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("备注成功")
                    this.$refs.popReturnTip.close()
                    this.getDetail()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        showSnewm(item) {
            this.$refs.deliveryCode.open()
        },
        goUrlremark(item) {
            this.easyGoTo(
                "/pages_shop/packet/order/remark?productdata=" + encodeURIComponent(JSON.stringify(item)) + "&from=1",
            )
        },
        mapNav(item) {
            // #ifdef APP-PLUS
            this.openMapRoute(+item.Latitude, +item.Longitude, item.Address)
            // #endif
            // #ifdef MP-WEIXIN
            this.openMapWX(+item.Latitude, +item.Longitude, item.Address)
            // #endif
        },
        openMapRoute(lat, lon, cityName) {
            var url = ""
            if (plus.os.name == "Android") {
                var hasBaiduMap = plus.runtime.isApplicationExist({
                    pname: "com.baidu.BaiduMap",
                    action: "baidumap://",
                })
                var hasAmap = plus.runtime.isApplicationExist({
                    pname: "com.autonavi.minimap",
                    action: "androidamap://",
                })
                var urlBaiduMap =
                    "baidumap://map/marker?location=" + lat + "," + lon + "&title=" + cityName + "&src=婚梯"
                var urlAmap =
                    "androidamap://viewMap?sourceApplication=婚梯&poiname=" +
                    cityName +
                    "&lat=" +
                    lat +
                    "&lon=" +
                    lon +
                    "&dev=0"
                if (hasAmap && hasBaiduMap) {
                    plus.nativeUI.actionSheet(
                        {
                            title: "选择地图应用",
                            cancel: "取消",
                            buttons: [
                                {
                                    title: "百度地图",
                                },
                                {
                                    title: "高德地图",
                                },
                            ],
                        },
                        function (e) {
                            switch (e.index) {
                                case 1:
                                    plus.runtime.openURL(urlBaiduMap)
                                    break
                                case 2:
                                    plus.runtime.openURL(urlAmap)
                                    break
                            }
                        },
                    )
                } else if (hasAmap) {
                    plus.runtime.openURL(urlAmap)
                } else if (hasBaiduMap) {
                    plus.runtime.openURL(urlBaiduMap)
                } else {
                    url = "geo:" + lat + "," + lon + "?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82"
                    plus.runtime.openURL(url) //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
                }
            } else {
                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
                plus.nativeUI.actionSheet(
                    {
                        title: "选择地图应用",
                        cancel: "取消",
                        buttons: [
                            {
                                title: "Apple地图",
                            },
                            {
                                title: "百度地图",
                            },
                            {
                                title: "高德地图",
                            },
                        ],
                    },
                    function (e) {
                        switch (e.index) {
                            case 1:
                                url =
                                    "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&spn=0.008766,0.019441"
                                break
                            case 2:
                                url =
                                    "baidumap://map/marker?location=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&title=" +
                                    cityName +
                                    "&src=婚梯"
                                break
                            case 3:
                                url =
                                    "iosamap://viewMap?sourceApplication=婚梯&poiname=" +
                                    cityName +
                                    "&lat=" +
                                    lat +
                                    "&lon=" +
                                    lon +
                                    "&dev=0"
                                break
                            default:
                                break
                        }
                        if (url != "") {
                            plus.runtime.openURL(url, function (e) {
                                plus.nativeUI.alert("本机未安装指定的地图应用")
                            })
                        }
                    },
                )
            }
        },
        orderTakeNotify(id) {
            orderTakeNotify({
                orderIds: id,
            }).then((res) => {
                if (res.State == 1) {
                    this.easyToast("通知成功")
                }
            })
        },
        getTotalNum() {
            let num = 0
            this.detailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.person-info {
    margin: $app-page-padding;
    padding: $app-page-padding;
    background: $color-white;
    border-radius: 16rpx;
    font-size: 24rpx;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
}

.goods-item {
    font-size: 24rpx;
    display: flex;
    margin-bottom: 20rpx;
    .goods-img {
        width: 192rpx;
        height: 192rpx;
        margin-right: 20rpx;
    }
    .goods-info {
        flex: 1;
        .name {
            font-size: 28rpx;
        }
        .spec {
            padding: 10rpx 0;
            color: $color-gray-3;
        }
        .price {
        }
    }
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-header {
    padding: 36rpx;
    font-size: 32rpx;
    text-align: center;
}

.order-main {
    // margin-top: -190rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-text-mian;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-text-mian;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-weight: bold;
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 24rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}
.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;
    text {
        color: $color-gray-3;
    }
}
.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        & > view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        // border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 220rpx);
    }
    .scrollheight {
        height: auto;
        background: #f6f6f6;
    }
}
.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}
.step-pro-list {
    // background: #000;
    background: #f6f6f6;
    border-radius: 24rpx 24rpx 0 0;
    height: auto;
    padding-bottom: 0;
    height: auto;
    .pop-header {
        border-bottom: none;
    }
}

.steplist {
    padding: 40rpx 26rpx 100rpx 34rpx;
    background: #f6f6f6;
    & > view {
        position: relative;
        display: flex;
        height: 104rpx;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 12rpx;

        .leftstate {
            width: 24rpx;
            height: 24rpx;
            background: #b1b1b1;
            border-radius: 50%;
            margin-right: 36rpx;
            position: relative;
            z-index: 10;

            image {
                width: 24rpx;
                height: 24rpx;
                display: block;
            }
        }

        .right_desc {
            flex: 1;
            background: #ffffff;
            border-radius: 8rpx;
            color: $color-gray-2;
            font-size: 28rpx;
            height: 104rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 24rpx;
        }
    }

    & > view:last-child:after {
        width: 0;
        height: 0;
    }

    & > view:after {
        content: "";
        width: 2rpx;
        height: 104rpx;
        // background: $app-color-main;
        background: url(/static/img/shuline.png) repeat-y;
        position: absolute;
        left: 11rpx;
        top: 50%;
        z-index: 1;
    }

    .current {
        .leftstate {
            background: $app-color-main;
            width: 32rpx;
            height: 32rpx;
            margin-left: -4rpx;

            image {
                width: 32rpx;
                height: 32rpx;
                display: block;
            }
        }

        .right_desc {
            font-weight: bold;
            font-size: 32rpx;
            color: $app-color-main;
        }
    }

    .active {
        .leftstate {
            background: $app-color-main;
        }

        .right_desc {
            view {
                font-size: 28rpx;
                color: $color-gray-1;
            }

            text {
                font-size: 24rpx;
                color: $color-gray-2;
            }
        }
    }

    & > .active:after,
    & > .current:after {
        content: "";
        width: 2rpx;
        height: 104rpx;
        background: $app-color-main;
        position: absolute;
        left: 11rpx;
        top: 50%;
        z-index: 1;
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}
.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;
    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        .label-text {
            flex: 1;
        }
    }
    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    padding-bottom: 14rpx;
    padding: 24rpx;
    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 136rpx;
            height: 136rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
            .no-worry-item {
                .no-worry-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    border-radius: 4rpx;
                    background: #fff8f8;
                    padding: 8rpx;
                    .no-worry-text {
                        position: relative;
                        margin-right: 20rpx;
                        padding-left: 10rpx;
                        margin-bottom: 4rpx;
                        font-size: $font-size-22;
                        color: #db0032;
                        &:after {
                            content: " ";
                            position: absolute;
                            right: -16rpx;
                            top: 14rpx;
                            width: 6rpx;
                            height: 6rpx;
                            border-radius: 20rpx;

                            background-color: #db0032;
                        }
                    }
                    .last-no-worry-text {
                        &:after {
                            background-color: $transparent;
                        }
                    }
                }
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }
            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }
        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}
.consignee {
    padding: $app-page-padding;
    // padding-bottom: 26rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    border-bottom: 2rpx solid #ebebeb;
}
.takeTheir {
    padding-top: 20rpx;
    .time {
        display: block;
        font-size: 24rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: normal;
    }
}
.mapAddress {
    flex: 1;
    display: flex;
    font-weight: normal;
    justify-content: space-between;
    .navigation {
        display: flex;
        view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 60rpx;
            margin-left: 20rpx;
            text {
                color: #999;
            }
        }
    }
}
.fs-24 {
    font-size: 24rpx;
    color: #666;
}
.code-pop {
    width: 640rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: relative;
    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
}
.code-top {
    position: relative;
    height: 208rpx;
    background: $app-color-main;
    border-radius: 32rpx 32rpx 0 0;
    image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640rpx;
        height: 114rpx;
    }
}
.c-t-title {
    font-size: 42rpx;
    text-align: center;
    color: #fff;
    padding: 24rpx 0 12rpx 0;
}
.c-t-list {
    display: flex;
    justify-content: center;
    & > view {
        margin: 0 22rpx;
        color: #fff;
        font-size: 22rpx;
    }
}
.code-info {
    position: relative;
    width: 448rpx;
    height: 448rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
    margin: -48rpx auto 0 auto;
    padding: 64rpx;
    .uqrcode {
        width: 448rpx;
        height: 448rpx;
        display: block;
    }
}
.desc {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0 16rpx 0;
}
.desc1 {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0rpx 0 40rpx 0;
}
.icon-gray-1 {
    margin-top: 8rpx;
}

.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
    }
}
.maincolor {
    color: $app-color-main;
}
.itemPrice {
    font-size: 28rpx;
    font-weight: bold;
}
</style>
